<template>
  <div class="row paginate">
    <div class="col-sm-5 hidden-xs">
      <div class="dataTables_info" id="example-datatable_info" role="status" aria-live="polite">
        <strong>第{{nowPaginate}}页</strong>-<strong>共{{totalPages}}页</strong> 共<strong>{{totalList}}信息</strong></div>
    </div>
    <div class="col-sm-7 col-xs-12 clearfix" v-if="paginateList.length!==0">
      <div class="dataTables_paginate paging_bootstrap" id="example-datatable_paginate">
        <ul class="pagination pagination-sm remove-margin">
          <li v-for="paginate in paginateList" class="prev"
              :class="{disabled:false===isNaN(paginate.disable)&& true===paginate.disable}"
              v-if="(false===isNaN(paginate.prev) && paginate.prev===true) && paginate.disable===true">
            <a href="javascript:void(0)"><i class="fa fa-chevron-left"></i></a></li>
          <li class="prev" :class="{disabled:false===isNaN(paginate.disable)&& true===paginate.disable}"
              v-else-if="(false===isNaN(paginate.prev) && paginate.prev===true) && false===paginate.disable"
              @click="goPage(paginate.pageIndex)">
            <a href="javascript:void(0)"><i class="fa fa-chevron-left"></i></a></li>
          <li :class="{active:paginate.Active}" v-else-if="true===isNaN(paginate.prev) && paginate.Active===true"><a
            href="javascript:void(0)">{{paginate.pageIndex}}</a></li>
          <li :class="{active:paginate.Active}" v-else-if="true===isNaN(paginate.prev)   && paginate.Active===false"><a
            href="javascript:void(0)" @click="goPage(paginate.pageIndex)">{{paginate.pageIndex}}</a></li>
          <li class="next" :class="{disabled:false===isNaN(paginate.disable) && true===paginate.disable}"
              v-else-if="(isNaN(paginate.prev)===false && paginate.prev===false) && paginate.disable===true">
            <a href="javascript:void(0)"> <i class="fa fa-chevron-right"></i></a></li>
          <li class="next" :class="{disabled:false===isNaN(paginate.disable) && true===paginate.disable}"
              v-else-if="(isNaN(paginate.prev)===false && paginate.prev===false) && paginate.disable===false"
              @click="goPage(paginate.pageIndex)">
            <a href="javascript:void(0)"> <i class="fa fa-chevron-right"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {mapState} from 'vuex';
  import lockr      from  'lockr';
  import _          from 'lodash'; // 保证我们的lodash 的版本是3.10.1 否则很多功能没发用
  const PREV_TEXT = '<<';
  const NEXT_TEXT = '>>';
  export default{
    props: {
      nowPaginate: {
        type: Number,
        required: true,
        default(){
          return 1;
        }
      },
      totalList: {
        type: Number,
        required: true,
        default(){
          return 1;
        }
      }
    },
    data(){
      return {
        paginateList: [],
        changePaginateList: [],
        listRow: 10,   //  此配置项需和后台的配置项保持一致
        firstRow: 0,
        totalPages: 1,
        paginateTemplate: ''
      }
    },
    methods: {
      paginateInit(mark){
        // 置空避免重复的添加
        this.changePaginateList = [];
        //  当前页码
        let CurrentPage = this.$route.query.page || 1;
        // 类型转换
        CurrentPage = CurrentPage - 0;
        // 总的页数
        this.totalPages = Math.ceil(this.totalList / this.listRow);
        // 起始页
        this.firstRow = (CurrentPage - 1) * this.listRow;
        // 去摸判断 减去 1 为了 翻页显示跟加的友好 做准备
        let judgeNum = CurrentPage - 1 <= 0 ? 1 : CurrentPage - 1 % this.paginate, endNumber = this.paginate,
          startNum = 1;
        // 判断是生成的最大页数 这个只是下一个分页条的展示  10   11   14     5页 切换页码 判断是够改变换页数
        if (judgeNum === 0) {
          //   需要从下一页的起始数字比当前大一所以需要加上1
          startNum = CurrentPage + 1;
          //   如果当前的事我们的要显示的整数倍那么就 不切换页码
          endNumber = CurrentPage + this.paginate;
        } else {
          // 得到分页条最大页码
          endNumber = this.getEndNumber(CurrentPage);
          // 得到分页条最小页码
          startNum = (endNumber - this.paginate) <= 0 ? 1 : (endNumber - this.paginate + 1);
        }
        let endDisabled = false;
        // 什么时机禁止下一页点击
        if (endNumber >= this.totalPages) {
          endDisabled = true;
        }
        //  计算是当前的分页是够超出了总页
        endNumber = endNumber >= this.totalPages ? this.totalPages : endNumber;
        //  组合分页条
        for (let i = startNum; i <= endNumber; ++i) {
          let itemPage = {};
          itemPage.pageIndex = i;
          itemPage.text = i;
          itemPage.Active = false;
          if (CurrentPage === i) {
            itemPage.Active = true;
          }
          if (false === mark) {
            this.paginateList.push(itemPage);
          }
          else {
            this.changePaginateList.push(itemPage);
          }
        }
        // 上一页处理
        let prev_data = {
          pageIndex: CurrentPage - 1,
          text: PREV_TEXT,
          Active: false,
          disable: CurrentPage - 1 == 0 ? true : false,
          prev: true
        };
        // 下一页的处理
        let end_data = {
          pageIndex: CurrentPage + 1,
          text: NEXT_TEXT,
          Active: false,
          disable: true === endDisabled ? true : false,
          prev: false
        };
        if (false === mark) {
          this.paginateList.unshift(prev_data);
          this.paginateList.push(end_data);
        } else if (true === mark) {
          this.changePaginateList.unshift(prev_data);
          this.changePaginateList.push(end_data);
        }
        //解决分页条dom更新问题 以下是分别是两种解决分页条dom不跟新的问题
        if (true === mark) {
         /* for (let i = 0; i < this.changePaginateList.length; ++i) {
            //重新出发分页条的变化 这是一个通用的分页条组件 this.$set触发当前的数据结构改变进而触发当前的dom发生改变
            this.$set(this.paginateList, i, this.changePaginateList[i]);
          }*/
         this.nextTick(()=>{
             this.paginateList    = {...this.changePaginateList};
         })
        }
      }, goPage(CurrentPage){
        //改变当前的路由
        this.$router.push({path: this.$route.path, query: {page: CurrentPage}});
      }, changePaginate(){
        // 监听路由变化
        this.paginateInit(true);
      }, getEndNumber(CurrentPaginate){
        // 获得最后一些  该方法还需要优化
        let maxPage = CurrentPaginate + this.paginate, GetPaginate = '';
        for (CurrentPaginate; CurrentPaginate <= maxPage; ++CurrentPaginate) {
          GetPaginate = CurrentPaginate % this.paginate;
          // 如果得到是0那么标识当前最后一页
          if (GetPaginate === 0) {
            return CurrentPaginate;
          }
        }
      }
    },
    computed: {
      ...mapState({
        paginate: 'pageIndex'
      })
    },
    mounted(){
      // 初始化显示分页条
      this.paginateInit(false);
    },
    watch: {
      // 监听当前路由的变化
      '$route': 'changePaginate'
    }
  }
</script>
<style type="stylus" scoped>
</style>
